<template>
  <div id="app">
    <!--1、 -v-bind 动态修改标签元素 ：属性=值 在data函数对象里面声明  不会返回数据到后端
这时候的text就等于想把input修改成任何的属性 可以是密码框可以是复选框 也可传值-->
    <!-- <input :type="text" > -->
    <!-- v-model 表单双向数据绑定 可以同时监听前端和后端的表单数据 输入完毕后才会触发-->
    <!-- <input type="text" v-model="conter"> -->
    <h2 class="title" >
    时光穿梭机 <input type="text" >{{ sum }}

    </h2>
    <hr />

    <div class="titleA" v-show="show">

      <h2 >云边有个小卖部</h2>
      <div class="input-group">
        频道：<select v-model="tagA">
     
          <option value="刘十三" >刘十三</option>
          <option value="小女孩">小女孩</option>
          <option value="微风">微风</option>
        </select>
      </div>
  <button class="cancell"  @click="FA" >返回</button>
    </div>

    <div class="titleB" v-show="!show">
      <h2>朝花夕拾</h2>
      <div class="input-group">
        频道：<select>{{tagB}}
          <option value="野草">野草</option>
          <option value="鲜花">鲜花</option>
          <option value="文字">文字</option>
        </select>
           </div>
      <div class="operation">
        <button  @click="show =!show">取消</button>
        <button  @click="confirm">确认</button>
      </div>
      </div>
    </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      money: 100,
      show:false,
      summer: "点击穿梭",
      sum: "年",
      tagB:"鲜花",
  tagA:"小女孩"

    };
  },
  methods: {
    addmoney() {
      this.money += 100;
    },add(){
      this.show=true
      this.tagA=this.tagB
    },confirm(){
      this.show=true

    },FA(){
     this.show=false
       this.tagB=this.tagA
    }
 
  },
};
</script>

<style>
div {
  text-align: center;
}
button {
  border-radius: 8px;
  background-color: chocolate;
  height: 35px;
  margin: 0 20px;
  border: 0px dashed pink;
}
button:nth-child(2) {
  margin-left: 180px;
}
input{
  height: 35px;
  width: 60px;
  border-radius: 8px;
margin: 0 8px;
}
.input-group {
  margin-top: 16px;
  font-size: 28px;
}
.cancell{
    margin-top: 25px;
    width: 80px;
}
.operation{
  margin-top: 25px;

}
</style>
